<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../dwz/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../dwz/plugin/reveal/jquery.reveal.js" type="text/javascript"></script>
<link href="../dwz/plugin/reveal/reveal.css" rel="stylesheet" type="text/css"
	media="screen" />
<title>welcome</title>
<style type="text/css">
	body{
	margin:0px
	}
	.content{
		width:100%;
		position:relative;
		margin-top:40px;
	}
	.fixed-content{
		float:right;
		margin-left:10px;
	}
	.fixed-container{
		position: fixed;
	    bottom: 20px;
	    right: 30px;
	    cursor: pointer;
	    font-size: 13px;
	    color: #909090;
	    font-weight: 200;
	}
	.fixed-icon{
		width:20px;
	}
	.top-bg{
		text-align:center;
		width: 100%;
	    height: 240px;
	    background: transparent url(dwz/image/bg_top.jpg) no-repeat scroll 50%;
	    background-size: cover;
	}
</style>
<script type="text/javascript">
	$(function(){
		var str = "${mediaList}";
		var mediaList = eval("(" + str + ")");
		
		var col = 4;
		var spaceTop = 50;
		var spacePercent= 20*100/(document.body.clientWidth)
		var heightArr=[0,0,0,0];
		$.each(mediaList,function(index,media){
			var widthPercent = (100-spacePercent*(col-1))/col;
			var left = (spacePercent+widthPercent)*(index%col);
			var top = 20+heightArr[index%col];
			heightArr[index%col] = top+(widthPercent/100)*(document.body.clientWidth)/(media.imageWidth/media.imageHeight);
			$div = $("<div info='"+media.info+"' title='"+media.title+"' loc='"+media.forwardUrl+"' style='color:#5c5c5c;text-align:center;position:absolute;top:"+top+"px;left:"+left+"%;width:"+widthPercent+"%;'><a href='#' class='big-link' data-reveal-id='myModal'><img relW='"+media.imageWidth+"' relH='"+media.imageHeight+"' style='width:100%;margin-bottom:10px;' src='"+media.avatarUrl+"'/></a>"+media.title+"</div>");
			$(".content").append($div);
			$div.click(function(){
				var loc = $(this).attr("loc");
				if(new RegExp("^http").test(loc)){
					$("#myModal img").css("cursor","pointer");
				}else{
					$("#myModal img").css("cursor","");
				}
				$("#myModal img").attr("loc",loc);
				$("#myModal img").click(function(){
					var forwardUrl = $(this).attr("loc");
					if(forwardUrl==null||(!new RegExp("^http").test(forwardUrl))){
						return;
					}
					window.open(forwardUrl);  
				});
				$("#myModal h1").text($(this).attr("title"));
				$("#myModal p").text($(this).attr("info"));
				$("#myModal img").attr("src",$(this).find("img").attr("src"));
			});
		});
		
		$("#detailContainer").click(function(){
			$("#detailContainer").css("display","none");
		});
		
		
		$("#kefu").mouseenter(function(){
			$("#kefu-content").css("display","block");
		});
		$("#kefu").mouseleave(function(){
			$("#kefu-content").css("display","none");
		});
	});
</script>
</head>
<body  ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
	<div class="top-bg">
		<img alt="logo" src="../dwz/image/logo2.png" style="width: 200px;margin-top: 80px;">
		<img alt="" src="../dwz/image/case_top.png" style="position: absolute;top: 200px;width: 80px;left: 200px;"/>	
	</div>
	<div class="content">
	</div>
	
	<!-- <div id="detailContainer" style="display:none;background-color:#55000000;">
		<div id="detail" style="margin:auto;background-color:white;">
			<img style="margin:auto;"/>
			<div class="title" style="text-align:center;"></div>
			<div class="info" style="text-align:center;"></div>
		</div>
	</div> -->

		<div id="myModal" class="reveal-modal" style="margin-left: -550px;width: 1020px;">

			<img style="width:100%;"/>

			<h1></h1>
			<p></p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
		
		<div class="fixed-container" style="bottom:220px;">
			<a href="/"><img src="../dwz/image/icon_home.png" style="width:40px;float: right;position: absolute;bottom: 0px;right: 0px;"/></a>
		</div>
		
		<div class="fixed-container" style="bottom:170px;">
			<a href="/case"><img src="../dwz/image/icon_case.png" style="width:40px;float: right;position: absolute;bottom: 0px;right: 0px;"/></a>
		</div>
		
		<div class="fixed-container" style="bottom:120px;">
			<a href="/introduce"><img src="../dwz/image/icon_introduce.png" style="width:40px;float: right;position: absolute;bottom: 0px;right: 0px;"/></a>
		</div>
		<div class="fixed-container" style="bottom:70px;">
			<a href="/contact"><img src="../dwz/image/icon_contact.png" style="width:40px;float: right;position: absolute;bottom: 0px;right: 0px;"/></a>
		</div>
		
		<div class="fixed-container" id="kefu">
			<img src="../dwz/image/kefu.png" style="width:40px;float: right;position: absolute;bottom: 0px;right: 0px;"/>
			<div id="kefu-content" style="display:none;margin-right: 50px;float:left;background-color:#ffffff;border-radius:5px;padding:10px;box-shadow: 1px 1px 5px #aaaaaa;">
				<div>
					<img class="fixed-icon" src="../dwz/image/qq.png"/>
					<div class="fixed-content">
						<div>QQ客服1:1591132521</div>
						<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=15911325218&site=qq&menu=yes"><img  src="../dwz/image/qq_lianxi1.png" style="margin-top:5px;width: 60px;"></a>
						<div style="margin-top:5px;">QQ客服2:1732892929</div>
						<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1732892929&site=qq&menu=yes"><img  style="margin-top:5px;width: 60px;" src="../dwz/image/qq_lianxi2.png"></a>
					</div>
				</div>
				<div >
					<img class="fixed-icon"  src="../dwz/image/phone.png" style="margin-top:90px;"/>
					<div class="fixed-content">
						<div style="margin-top: -17px;margin-right: 18px;">骆经理:18671811862</div>
					</div>
				</div>
				<div >
					<img class="fixed-icon" src="../dwz/image/clock.png" style="margin-top:25px;"/>
					<div class="fixed-content" style="margin-top: -18px;">
						周一至周六9:30-23:00
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
		</div>
</body>
</html>